iT邦幫忙

2026 iThome 鐵人賽

DAY 3
0
ChatGPT & Codex

從需求到實作:30 天與 Codex 協作打造 Idea Note PWA系列 第 3

Day 3|先不要急著寫程式:Idea Note 的第一個畫面該放什麼?

  • 分享至 

  • xImage
  •  

前兩天,我先整理了製作 Idea Note 的原因,以及第一個版本需要保留的功能。

原本我以為確認完功能,就可以直接繼續寫程式。但真正打開專案之後,我突然不知道應該先做哪一部分。

要先做新增筆記嗎?
還是先顯示筆記清單?
分類、搜尋和語音輸入又應該放在哪裡?

腦中同時出現太多功能,結果反而很難開始。

所以今天我先不急著增加程式碼,而是回頭思考一件更基本的事:使用者打開 Idea Note 之後,第一眼究竟需要看到什麼?

我不想做一個操作很複雜的筆記工具

Idea Note 最初要解決的問題,是「想到一件事,卻來不及記下來」。

既然重點是快速記錄,使用者打開 App 之後,就不應該先選分類、進入資料夾,或經過好幾個頁面才能開始輸入。

第一版的首頁只需要幾個主要區塊:

  • 筆記輸入框
  • 儲存按鈕
  • 已儲存的筆記清單
  • 每一則筆記的編輯與刪除按鈕

換句話說,使用者打開頁面後,可以直接輸入內容,按下儲存,接著在同一個畫面看到剛剛新增的筆記。

目前我甚至不打算製作太多頁面。因為如果只有一個主要畫面,就能完成記錄、查看、修改與刪除,那麼第一版沒有必要為了看起來像一個完整的 App,硬是加入複雜的選單。

先確認最短的操作流程

我把最基本的操作流程暫時定成這樣:

  1. 打開 Idea Note。
  2. 在輸入框寫下內容。
  3. 按下儲存。
  4. 新增的內容出現在下方。
  5. 需要時再進行修改或刪除。

這個流程很短,甚至看起來有點普通,但它正是我目前最需要完成的部分。

我很容易在還沒完成基本功能以前,就先想到後面的語音輸入、AI 分類、標籤和跨裝置同步。這些功能確實很有吸引力,可是如果使用者連一則筆記都無法順利保存,後面的功能想得再完整也沒有意義。

現在的專案進度

目前的程式已經可以取得輸入框裡面的文字,也就是說,使用者輸入內容後,程式已經知道輸入了什麼。

但「讀到文字」和「完成一則筆記」之間,還有一段距離。

接下來至少要處理:

  • 沒有輸入內容時,不應該新增空白筆記。
  • 按下按鈕後,要建立一筆新的資料。
  • 新增完成後,要把內容顯示在畫面上。
  • 輸入框要恢復成空白,方便繼續輸入。

這幾件事會是下一階段真正需要實作的內容。

今天沒有寫很多程式,也算是進度嗎?

老實說,如果只看程式碼,今天的進度並不多。

但我把原本散在腦中的想法,縮小成一個可以開始製作的畫面,也確定了第一版不需要複雜的頁面切換。

對我來說,這一步其實很重要。因為以前做作品時,很容易一開始就想做得很完整,最後卻因為範圍太大而停在半路。

這次我想換一種方式:先讓最小的功能真的運作,再慢慢增加其他需求。

下一篇,我會開始處理「新增筆記」的功能,讓輸入框裡的文字不只是被讀取,而是真的成為畫面上的一則筆記。


上一篇
Day 2|從使用情境定義需求:Idea Note 的 MVP 應該包含什麼?
下一篇
Day 4|按下「儲存」之後,文字到底去了哪裡?
系列文
從需求到實作:30 天與 Codex 協作打造 Idea Note PWA10
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言